import React, { Component } from 'react'
import { Carousel} from 'antd-mobile';
import Banner from '../../assets/images/banner.png'
import Banner1 from '../../assets/images/banner1.png'

export default class carousel extends Component {
    state = {
        data: [Banner, Banner1],
        imgHeight: 176,
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: [Banner, Banner1],
            });
        }, 100);
    }

    render() {
        return (
            <div style={
                {
                    position:"relative",
                    zIndex:'10000',
                    background:"#fff",
                    padding:'0.1rem 0',
                    

                }
            }>
                <Carousel
                    autoplay={true}
                    infinite
                    style={{
                        borderRadius:'0.1rem',
                        height:'1.67rem',
                        width:"100%"
                    }}
                >
                    {this.state.data.map(val => (
                        <img
                            src={`${val}`}
                            alt=""
                            style={{
                                width: '100%', 
                                verticalAlign: 'top',
                                borderRadius:'0.1rem'
                            }}
                            onLoad={() => {
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                            key={val}
                        />
                    ))}
                </Carousel>
            </div>
        )
    }
}
